<template>
  <BasicLayout>
    <template #wrapper>
      <search-form
        :is-zero-tab="true"
        :report-type="formData.reportType"
        :is-goods="true"
        :exporting="exporting"
        :is-single-date="true"
        :expdrop="true"
        @export="val => onExportReport('负库存城市版报表', val, exportApi)"
        @submit="onSearchReport"
      />
      <table-pagination
        ref="table"
        :key="tableKey"
        :show-summary="showSummary"
        :summary-method="getSummaries"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNo"
        border
        @handlePaginationChange="onPaginationChange"
      >
        <template slot="operate" slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            @click="onView(scope.item)"
          >查看详情</el-link>
        </template>
      </table-pagination>
    </template>
  </BasicLayout>
</template>
<script>
import SearchForm from '@/components/business/SearchForm';
import TablePagination from '@/components/common/TablePagination';
import { getNegativeStockReport, exportNegativeStockReport } from '@/api/negativeApi';
import exportReportMixin from '@/components/mixins/ExportReport';
import tableSummariesMixin from '@/components/mixins/TableSummaries';
import Columns from './columnsConfig.js';
import { cloneDeep } from 'lodash';

export default {
  name: 'KAliveNINCityDdition',
  components: {
    SearchForm,
    TablePagination
  },
  mixins: [tableSummariesMixin, exportReportMixin],
  data() {
    return {
      columns: Columns,
      exportApi: exportNegativeStockReport,
      tableData: [],
      loading: false,
      exporting: false,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      formData: {},
      tableKey: 0
    };
  },
  methods: {
    /* 分页查询 */
    onPaginationChange({ current: pageNo = 1, size: pageSize = 10 } = {}) {
      this.onSearchReport({ ...this.formData, pageNo, pageSize });
    },
    /* 查询报表 */
    onSearchReport(form) {
      this.loading = true;
      this.tableData = [];
      this.formData = {
        pageNo: 1,
        pageSize: 10,
        ...form,
        queryMode: 'CITY'
      };
      getNegativeStockReport(this.formData)
        .then(({ data, current, resultCode, pageSize, total }) => {
          if (resultCode === '0000') {
            this.tableData = data;
            this.pageNo = current;
            this.pageNo === 1 ? this.total = total : '';
            this.pageSize = pageSize;
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
      const params = cloneDeep(this.formData);
      delete params.pageNo;
      delete params.pageSize;
      // 来源tableSummariesMixin
      this.getRetailDetailsTotal({ ...params, summary: true }, getNegativeStockReport);
    },
    onView({ cityName, cityId }) {
      const params = {
        ...this.formData,
        name: cityName,
        cities: [cityId]
      };
      this.$store.dispatch('retail/clearParentForm');
      const callback = () => this.$router.push({ path: '/negative-inventory/city-edition-details' });
      this.$store.dispatch('retail/setParentForm', {
        params,
        callback
      });
    }
  }
};
</script>
